<template>
  <div class="goods">
    <div class="smallTitle">
      <p class="afterC"></p>
      <p>猜你喜欢</p>
    </div>
    <div class="Commodity">
      <CommodityVue class="shadowBox" v-for="item in listStore.GuessLikeArr" :key="item.goodsid"
        @goDetail="xq(item.goodNorms[0].photo,item.goodsid)" :title="item.gname" :price="item.discountPrice"
        :src="item.goodNorms[0].photo">
      </CommodityVue>
    </div>
    <p class="bottom">没有更多内容了~~</p>
  </div>
</template>

<script setup>
import CommodityVue from "./Commodity.vue";
import { useRouter, useRoute } from "vue-router";
import { ref } from "vue";

import { useListStore } from "../../stores/list";
import { useDetailStore } from "../../stores/detail.js";
import dayjs from "dayjs";
const detailStore = useDetailStore()


const listStore = useListStore()
const router = useRouter();
const route = useRoute();
const imgArr = ref([
  {
    name: '商品名字1',
    num: '777',
    price: 347,
    discountPrice: 300,
    img: 'https://img2.baidu.com/it/u=3068955552,592582752&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=709'

  },
  {
    name: '商品名字2',
    num: '2325',
    price: 888,
    discountPrice: 666,
    img: "https://img2.baidu.com/it/u=1450556059,3545078013&fm=253&fmt=auto&app=138&f=JPG?w=500&h=282"

  },
  {
    name: '商品名字3',
    num: '235',
    price: 1314,
    discountPrice: 1111,
    img: "https://img2.baidu.com/it/u=1180169524,3876181993&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=468"

  },
  {
    name: '商品名字4',
    num: '765',
    price: 555,
    discountPrice: 444,
    img: "https://img0.baidu.com/it/u=3559460063,3369606170&fm=253&fmt=auto&app=138&f=JPEG?w=307&h=499",
  },
  {
    name: '商品名字1',
    num: '777',
    price: 347,
    discountPrice: 300,
    img: "https://img2.baidu.com/it/u=2083655990,385841221&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=520",

  },
  {
    name: '商品名字1',
    num: '777',
    price: 347,
    discountPrice: 300,
    img: 'https://img2.baidu.com/it/u=3068955552,592582752&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=709'

  },
  {
    name: '商品名字2',
    num: '2325',
    price: 888,
    discountPrice: 666,
    img: "https://img2.baidu.com/it/u=1450556059,3545078013&fm=253&fmt=auto&app=138&f=JPG?w=500&h=282"

  },
  {
    name: '商品名字3',
    num: '235',
    price: 1314,
    discountPrice: 1111,
    img: "https://img2.baidu.com/it/u=1180169524,3876181993&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=468"

  },
  {
    name: '商品名字4',
    num: '765',
    price: 555,
    discountPrice: 444,
    img: "https://img0.baidu.com/it/u=3559460063,3369606170&fm=253&fmt=auto&app=138&f=JPEG?w=307&h=499",
  },
  {
    name: '商品名字1',
    num: '777',
    price: 347,
    discountPrice: 300,
    img: "https://img2.baidu.com/it/u=2083655990,385841221&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=520",

  },

])

function xq(val, goodsid) {

  if (localStorage.shop && localStorage.shop.length !== 0) {

    const arr = JSON.parse(localStorage.shop)
    const newtime = dayjs().format('YYYY-MM-DD')

    const bool = arr.findIndex((item) => {
      return item.time == newtime
    })
    if (bool === -1) {
      arr.unshift({
        img: [val],
        time: newtime
      })
      localStorage.shop = JSON.stringify(arr)
    } else {
      const flag = arr[bool].img.indexOf(val)
      if (flag === -1) {
        arr[bool].img.unshift(val)
      }

      localStorage.shop = JSON.stringify(arr)

    }

  } else {

    const arr = [
      {
        time: dayjs().format('YYYY-MM-DD'),
        img: [val]
      }
    ]
    localStorage.shop = JSON.stringify(arr)
  }
  detailStore.getDetailInfo(goodsid).then((res) => {
    detailStore.images = res.data.data

    router.push({
      path: '/ShopDetail',
    });
  });


}



</script>

<style scoped>
p {
  font-size: 14px;
}

.goods {
  width: 90vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.Commodity {
  width: 90vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.smallTitle {
  width: 90vw;
  display: flex;
  font-size: 2.4vw;
  font-weight: bold;
  margin: 2.667vw 0;
  margin-left: 2.667vw;
}

.afterC {
  width: 0.533vw;
  background-color: red;
  border-radius: 0.267vw;
  margin-right: 2.667vw;
}

.bottom {
  text-align: center;
  line-height: 13.333vw;
  font-size: 2.4vw;
  font-weight: bold;
  color: #cccccc;
  margin-bottom: 13.333vw;
}

.shadowBox {
  box-shadow: 1.333vw 1.333vw 1.333vw #cccccc;
  margin: 1.6vw 0;
}
</style>